<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo09-组件-使用model</title>
</head>
<script src="../libs/vue.js"></script>
<body> 
    <div id="app">
      <my-input
        v-bind:cusinputvalue="myCusInputData"
        v-on:cus-input-chage="myInputChange"
      ></my-input>


      <input-wrapper v-model="myCusInputData"></input-wrapper>
    </div>
</body>
<script>

Vue.config.productionTip = false;

Vue.component('my-input',{ 
  props:['cusinputvalue'],
  template:`<div>
    <input v-bind:value="cusinputvalue" v-on:input="myInputFunc"><span>input值为：{{cusinputvalue}}</span>
    </div>`,
    methods:{
      myInputFunc:function($event){
         console.log($event);
        //  this.cusInput = $event.target.value;
         this.$emit('cus-input-chage',$event.target.value);
         /**
          * 明白了$emit原理后，事件不再是问题。
          * 设计模式要不要深入学一下？？？ 还是计算机基础打牢先
          * 
          */ 
      }
    }
});

/**
 * https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model  
 * 这是固定写法
 */ 
Vue.component('input-wrapper',{ 
  props:['value'],
  template:`<div>
    <input v-bind:value="value" v-on:input="myInputFunc"><span>input-wrapper 值为：{{value}}</span>
    </div>`,
    methods:{
      myInputFunc:function($event){ 
         this.$emit('input',$event.target.value); 
      }
    }
});

var app = new Vue({
  el: '#app',
  data:{
    myCusInputData:'asdfasdf'
  },
  methods:{
    myInputChange:function(changedValue){
      this.myCusInputData = changedValue
    }
  }
});

</script>
</html>